<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">

    <title>首页</title>


    <link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="/static/css/entypo.css">
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/neon-core.css">
    <link rel="stylesheet" href="/static/css/neon-theme.css">
    <link rel="stylesheet" href="/static/css/neon-forms.css">
    <link rel="stylesheet" href="/static/css/custom.css">

    <script src="/static/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body class="page-body  page-left-in" data-url="http://neon.dev">

<div class="page-container">
    <!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

    <div class="sidebar-menu">


        <header class="logo-env">

            <!-- logo -->
            <div class="logo">
                
                    <h3 style="color: #fff;font-size: initial;font-weight: bold;margin-top: 5px ">大数据技术就业可视化系统</h3>

                
            </div>

            <!-- logo collapse icon -->

            <div class="sidebar-collapse">
                <a href="#" class="sidebar-collapse-icon with-animation">
                    <!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
                    <i class="entypo-menu"></i>
                </a>
            </div>


        </header>


        <div class="sidebar-user-info">

            <div class="sui-normal">
                <a href="#" class="user-link">
                    <img style="width: 95%;border-radius: 50%" src="/media/{{ userInfo.avatar }}" width="120" alt="">
                    <span style="text-align: center;padding-top: 200px">欢迎回来</span>
                    <strong style="text-align: center;margin-top: 5px">{{ userInfo.username }}</strong>
                </a>
            </div>

            
        </div>


        <ul id="main-menu" class="">
            
            <li class="opened active">
                <a href="/myApp/home">
                    <i class="entypo-gauge"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-user"></i>
                    <span>个人中心</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/selfInfo">
                            <span>个人信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/changePassword">
                            <span>修改密码</span>
                        </a>
                    </li>
                </ul>
            </li>
            
            <li>
                <a href="#">
                    <i class="entypo-layout"></i>
                    <span>数据统计</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/tableData">
                            <span>数据总览</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/historyTableData">
                            <span>公司收藏</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="mailbox.html">
                    <i class="entypo-chart-bar"></i>
                    <span>可视化图表</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/salary">
                            <i class="entypo-inbox"></i>
                            <span>薪资情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/company">
                            <i class="entypo-attach"></i>
                            <span>企业情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/companyTags">
                            <i class="entypo-thumbs-up"></i>
                            <span>福利词云</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/educational">
                            <i class="entypo-book-open"></i>
                            <span>学历分布</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/companyStatus">
                            <i class="entypo-network"></i>
                            <span>企业融资</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="main-content">

        <div class="row" style="display: flex">


            <!-- Raw Links -->
            <div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">

                <ul class="list-inline links-list pull-right">


                    <li class="sep"></li>

                    <li>
                        <a href="/myApp/logOut">
                            退出登录<i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>

            </div>

        </div>

        <hr>

        <div class="row">
            <div class="col-sm-12">
                <div class="well">
                    <h1>{{ dataInfo.month }} {{ dataInfo.day }}, {{ dataInfo.year }}</h1>
                    <h3>欢迎： <strong>{{ userInfo.username }}</strong></h3>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-9">

                <div class="row">

                    <div class="col-sm-6">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">用户创建时间饼状图</div>

                                <div class="panel-options">
                                    <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1"
                                       class="bg"><i class="entypo-cog"></i></a>
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>

                                </div>
                            </div>
                            <div class="panel-body">
                                <div id="main" style="width: 100%;height: 300px">

                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">最新用户信息</div>

                                <div class="panel-options">
                                    <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1"
                                       class="bg"><i class="entypo-cog"></i></a>
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>

                                </div>
                            </div>
                            <table class="table table-bordered table-responsive">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>用户名</th>
                                    <th>密码</th>
                                    <th>用户头像</th>
                                </tr>
                                </thead>

                                <tbody>
                                {% for u in top6Users %}
                                    <tr>
                                        <td>{{ u.id }}</td>
                                        <td>{{ u.username }}</td>
                                        <td>{{ u.password }}</td>

                                        <td>
                                            <img class="img-circle" src="/media/{{ u.avatar }}" width="32" alt="">
                                        </td>

                                    </tr>
                                {% endfor %}

                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>


                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>
                                数据获取量直方图
                                <br>
                            </h4>
                        </div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                        </div>
                    </div>

                    <div class="panel-body no-padding">
                        <div id="rickshaw-chart-demo-2">
                            <div id="mainTwo" style="width: 100%;height:350px "></div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-sm-3">


                <div class="tile-stats tile-blue">
                    <div class="icon"><i class="entypo-note"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.jobsLen }}" data-postfix="" data-duration="1500"
                         data-delay="0">{{ tagDic.jobsLen }}
                    </div>

                    <h3>数据总量统计</h3>

                </div>


            </div>
            <div class="col-sm-3">


                <div class="tile-stats tile-cyan">
                    <div class="icon"><i class="entypo-evernote"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.usersLen }}" data-postfix=""
                         data-duration="1500"
                         data-delay="0">{{ tagDic.usersLen }}
                    </div>

                    <h3>用户数量统计</h3>

                </div>


            </div>
            <div class="col-sm-3">


                <div class="tile-stats tile-aqua">
                    <div class="icon"><i class="entypo-users"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.educationsTop }}" data-postfix=""
                         data-duration="1500"
                         data-delay="0">{{ tagDic.educationsTop }}
                    </div>

                    <h3>行业最高学历</h3>

                </div>


            </div>
            <div class="col-sm-3">


                <div class="tile-stats tile-orange">
                    <div class="icon"><i class="entypo-users"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.salaryTop }}" data-postfix=""
                         data-duration="1500"
                         data-delay="0">{{ tagDic.salaryTop }}
                    </div>

                    <h3>行业最高薪资</h3>

                </div>


            </div>
            <div class="col-sm-3">


                <div class="tile-stats tile-red">
                    <div class="icon"><i class="entypo-users"></i></div>
                    <div class="num" data-start="0" data-end="北京，上海，深圳" data-postfix="" data-duration="1500"
                         data-delay="0">北京，上海，深圳
                    </div>

                    <h3>岗位优势城市</h3>

                </div>


            </div>
            <div class="col-sm-3">


                <div class="tile-stats tile-stats">
                    <div class="icon"><i class="entypo-users"></i></div>
                    <div class="num" data-start="0" data-end="{{ tagDic.salaryMonthTop }}" data-postfix=""
                         data-duration="1500"
                         data-delay="0">{{ tagDic.salaryMonthTop }}
                    </div>

                    <h3>最高年底多薪</h3>

                </div>


            </div>
            <div class="col-sm-3">


                <div class="tile-stats tile-red">
                    <div class="icon"><i class="entypo-users"></i></div>
                    <div class="num" data-start="0" data-postfix="" data-duration="1500"
                         data-delay="0">
                        {% if not tagDic.practiceMax %}
                            普通岗位
                        {% else %}
                            实习岗位
                        {% endif %}
                    </div>

                    <h3>多数岗位性质</h3>

                </div>


            </div>

        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default" data-collapsed="0"><!-- to apply shadow add class "panel-shadow" -->
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">数据表格</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body no-padding">
                        <div id="table-1_wrapper" class="dataTables_wrapper form-inline" role="grid">
                         
                            <table class="table table-bordered datatable dataTable" id="table-1"
                                   aria-describedby="table-1_info">
                                <thead>
                                <tr role="row">
                                    <th>编号
                                    </th>
                                    <th>职位名字
                                    </th>
                                    <th>工作地点
                                    </th>
                                    <th>职位类型
                                    </th>
                                    <th>学历要求
                                    </th>
                                    <th>工作经验</th>
                                    <th>工作标签</th>
                                    <th>最高薪水</th>
                                    <th>年底多薪</th>
                                    <th>是否实习</th>
                                    <th>公司名称</th>
                                    <th>公司福利</th>
                                    <th>公司封面</th>
                                    <th>融资阶段</th>
                                    <th>公司人数</th>
                                    <th>跳转</th>

                                </tr>
                                </thead>

                                <tbody role="alert" aria-live="polite" aria-relevant="all">
                                {% for job in tablaData %}
                                    <tr class="gradeA odd">
                                        <td class="  sorting_1">
                                            {{ forloop.counter }}
                                        </td>
                                        <td class=" ">
                                            <a href="https://www.zhipin.com/web/geek/job?query={{ job.title }}">
                                                {{ job.title }}
                                            </a>
                                        </td>
                                        <td class="center">{{ job.address }}</td>
                                        <td class="center">{{ job.type }}</td>
                                        <td class="center">{{ job.educational }}</td>
                                        <td class="center">{{ job.workExperience }}</td>
                                        <td class="center">{{ job.workTag }}</td>
                                        <td class="center">
                                            {% if job.practice %}
                                                {{ job.salary }}/天
                                            {% else %}
                                                {{ job.salary }}/月
                                            {% endif %}
                                        </td>
                                        <td class="center">
                                            {% if job.salaryMonth != '0' %}
                                                {{ job.salaryMonth }}薪
                                            {% else %}
                                                无
                                            {% endif %}
                                        </td>
                                        <td class="center">
                                            {% if job.practice != 0 %}
                                                实习岗位
                                            {% else %}
                                                普通岗位
                                            {% endif %}
                                        </td>
                                        <td class="center">{{ job.companyTitle }}</td>
                                        <td class="center">{{ job.companyTags }}</td>

                                        <td class="center">
                                            <img src="{{ job.companyAvatar }}" alt="">
                                        </td>
                                        <td class="center">{{ job.companyStatus }}</td>
                                        <td class="center">{{ job.companyPeople }}</td>
                                        <td class="center">
                                            <a href="{{ job.detailUrl }}" class="btn btn-info" style="margin-bottom: 5px">岗位详情</a>
                                            <a href="{{ job.companyUrl }}" class="btn btn-success" style="margin-bottom: 5px">公司详情</a>
                                            <a href="/myApp/addHistory/{{ job.id }}" type="button" class="btn btn-danger">添加收藏</a>
                                        </td>

                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            
                        </div>

                    </div>

                </div>

            </div>
        </div><!-- Footer -->
        <footer class="main">


            基于大数据技术的就业可视化系统设计与实现

        </footer>
    </div>


    <link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="/static/css/rickshaw.min.css">
    <link rel="stylesheet" href="/static/css/datatables.responsive.css">
    <link rel="stylesheet" href="/static/css/select2-bootstrap.css">
    <link rel="stylesheet" href="/static/css/select2.css">
    <!-- Bottom Scripts -->
    <script src="/static/js/main-gsap.js"></script>
    <script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <script src="/static/js/joinable.js"></script>
    <script src="/static/js/resizeable.js"></script>
    <script src="/static/js/neon-api.js"></script>
    <script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
    <script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
    <script src="/static/js/jquery.sparkline.min.js"></script>
    <script src="/static/js/d3.v3.js"></script>
    <script src="/static/js/rickshaw.min.js"></script>
    <script src="/static/js/neon-chat.js"></script>
    <script src="/static/js/neon-custom.js"></script>
    <script src="/static/js/neon-demo.js"></script>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/jquery.dataTables.min.js"></script>
    <script src="/static/js/TableTools.min.js"></script>
    <script src="/static/js/dataTables.bootstrap.js"></script>
    <script src="/static/js/jquery.dataTables.columnFilter.js"></script>
    <script src="/static/js/lodash.min.js"></script>
    <script src="/static/js/datatables.responsive.js"></script>
    <script type="text/javascript">
        var responsiveHelper;
        var breakpointDefinition = {
        tablet: 1024,
        phone : 480
    };
        var tableContainer;

        jQuery(document).ready(function ($)
        {
            tableContainer = $("#table-1");

            tableContainer.dataTable({
            "sPaginationType": "bootstrap",
            "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
            "bStateSave": true,


            // Responsive Settings
            bAutoWidth     : false,
            fnPreDrawCallback: function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper) {
            responsiveHelper = new ResponsiveDatatablesHelper(tableContainer, breakpointDefinition);
        }
        },
            fnRowCallback  : function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            responsiveHelper.createExpandIcon(nRow);
        },
            fnDrawCallback : function (oSettings) {
            responsiveHelper.respond();
        }
        });

            $(".dataTables_wrapper select").select2({
            minimumResultsForSearch: -1
        });
        })
        ;
    </script>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '用户数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: {{ userCreateData | safe }}
                }
            ]
        };

        option && myChart.setOption(option);


    </script>
    <script>
        var chartDom = document.getElementById('mainTwo')
        let data = {{ jobsPBarData | safe }}
        console.log(data)

        var myChart = echarts.init(chartDom)
        let xRes = []
        let yRes = []
        for (var i = 0; i < 5; i++) {
            xRes.push(data[i][0])
            yRes.push(data[i][1])
        }
        let options = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#546'
                    }
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['数据爬取量']
            },
            xAxis: {
                type: 'category',
                data: xRes,
                boundaryGap: true
            },
            yAxis: [
                {
                    type: 'value',
                    name: '数据爬取量',
                    axisLabel: {
                        formatter: '{value} 个'
                    }
                },
            ],
            series: [
                {
                    data: yRes,
                    type: 'bar',
                    name: '数据爬取量',
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]

                    },
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#da5859'
                            },
                            {
                                offset: 1,
                                color: '#a47b21'
                            }
                        ]
                    }
                },

            ]
        }
        let count = 5
        setInterval(() => {
            if (count >= data.length) count = 0
            xRes.shift()
            xRes.push(data[count][0])
            yRes.shift()
            yRes.push(data[count][1])
            count++

            myChart.setOption({
                xAxis: [{
                    data: xRes
                }],
                series: [
                    {
                        data: yRes
                    },

                ]
            })
        }, 2000)
        options && myChart.setOption(options)
    </script>
</div>
</body>
</html>